<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${comment!}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <%@include file="/common/common_easyui.jsp" %>
    <style>
    </style>

</head>
<body class="sub_body_pad">
<div class="query_criteria">
    <div class="query_tit"><em></em>查询条件</div>
    <div class="query_cont">
        <form id="ser" class="form-inline">
            <#list columns as column>
                <#if column.searField>
                <div class="form-group">
                    <label>${column.comment!}：</label>
                    <#if column.formType == 'input'>
                    <input class="easyui-textbox" type="text" name="${column.fieldName!}" id="${column.fieldName!}"/>
                    <#elseif column.formType == 'date'>
                    <input class="easyui-datebox" type="text" name="${column.fieldName!}" id="${column.fieldName!}"/>
                    <#elseif column.formType == 'select'>
                    <select  class="easyui-combobox" type="text" name="${column.fieldName!}" id="${column.fieldName!}">
                        <option value="">--请选择--</option>
                    </select>
                    </#if>
                </div>
                </#if>

            </#list>
            <div class="form-group">
                <a href="javascript:;" name="search" id="search" class="easyui-linkbutton btn-default">查询</a>
                <a href="javascript:;" name="reset" id="reset" class="easyui-linkbutton btn-default">重置</a>
            </div>
        </form>
    </div>
</div>

<div id="dlg" class="easyui-dialog" closed="true" title="新增" data-options="buttons: '#dlg-buttons',modal:true"
     style="display:none;width: 70%; height: 480px;padding: 10px;top: 20px">
    <form id="addForm">
        <table class="layui-table" style="width: 100%;height: 100%">
           <#list columns as column>
               <#if column_index % 2 == 0>
                <tr>
               </#if>
                   <td style="width: 20%;">${column.comment!}</td>
                    <#if column.formType == 'input'>
                   <td style="width: 30%;"><input class="easyui-textbox" value="" style="width:300px;" id='${column.fieldName!}' name='${column.fieldName!}'/></td>
                    <#elseif column.formType == 'date'>
                   <td style="width: 30%;"><input class="easyui-datebox" value="" style="width:300px;" id='${column.fieldName!}' name='${column.fieldName!}'/></td>
                    <#elseif column.formType == 'select'>
                    <td style="width: 30%;"><select  class="easyui-combobox" value="" style="width:300px;" id='${column.fieldName!}' name='${column.fieldName!}'></select></td>
                    </#if>
               <#if column_index % 2 != 0>
                </tr>
                </#if>
           </#list>
        </table>
    </form>
</div>

<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">保存</a>
    <a href="javascript:void(0)" id="close_btn" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">关闭</a>
</div>

<div class="easyui-datagrid-height">
    <table id="dg" style="display: block;width:100%;"></table>
</div>

<script type="text/javascript">
    $(function () {
        var datagrid = $("#dg").datagrid({
            url: "<%=basePath%>${className!?uncap_first}/list.do",
            pagination: true,//显示分页
            rownumbers: true,//显示行号
            fit: true,//自动补全
            pageSize: 20,//分页大小
            pageList: [20, 40, 60, 80],//每页的个数
            fitColumns: true,
            loadFilter: function (data) {
                //过滤数据
                if (data.records == null || data.records == "") {
                    return {total: 0, rows: []};
                } else {
                    var value = {
                        total: data.total,
                        rows: []
                    };
                    var x = 0;
                    for (var i = 0; i < data.records.length; i++) {
                        value.rows[x] = data.records[i];
                        x++;
                    }
                    return value;
                }
            },
            toolbar: [{
                id: 'add',
                text: '新增',
                handler: function () {
                    add();
                },
            }, "-", {
                id: 'edit',
                text: '修改',
                handler: function () {
                    update();
                },
            }, "-", {
                id: 'view',
                text: '查看',
                handler: function () {
                    view();
                },
            }, "-", {
                id: 'del',
                text: '删除',
                handler: function () {
                    del();
                }
            }
            ],
            columns: [[      //每个列具体内容
                {field: 'ck', checkbox: true}
                <#list columns as column>
                    <#if column.listField>
                ,{field: '${column.fieldName!}', title: '${column.comment!}', halign: 'center',align: 'center', width: 80}
                    </#if>
                </#list>
            ]],
            singleSelect: false,
            selectOnCheck: true,
            checkOnSelect: true,
            height: 300
        });
        var p = $('#dg').datagrid('getPager');
        $(p).pagination({
            pageSize: 20,//每页显示的记录条数，默认为10
            pageList: [20, 40, 60, 80],//可以设置每页记录条数的列表
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '显示 {from} - {to}   共 {total} 条记录'
        });
        //重置
        $("#reset").click(function () {
            $("#ser").form('clear');
            $("#search").click();
        });
        //搜索功能
        $("#search").click(function () {

            $('#dg').datagrid({
                url: "<%=basePath%>${className!?uncap_first}/list.do",
                queryParams: {

                }
            });
            refreshBtn(['add', 'edit', 'view', 'del']);
        });
    });

    function add() {
        $('#dlg').form('clear');
        $('#dlg').dialog('open');
    }

    //更新
    function update() {
        var row = getDgChecked('dg');
        if (row) {
            $('#dlg').form('clear');
            $('#dlg').dialog('open');
            $('#dlg').form('load', row);
        }
    }

    function view() {
        var row = getDgChecked('dg');
        if (row) {
            $('#dlgView').form('clear');
            $('#dlgView').dialog('open');
            $('#dlgView').form('load', row);
        }
    }

    // 删除
    function del() {
        var rows = $('#dg').datagrid('getSelections');
        if (rows.length > 0) {
            var ids = "";
            for (var i = 0; i < rows.length; i++) {
                ids += rows[i].id + ",";
                //获取选中节点的值
            }
            $.messager.confirm('提示框', '您确定要删除吗?', function (r) {
                if (r) {
                    $.ajax({
                        url: '<%=basePath%>${className!?uncap_first}/del.do',
                        data:{ids: ids},
                        success: function (data) {
                            $.messager.show({
                                title: '提示',
                                msg: data.message,
                                timeout: 3000,
                                showType: 'slide'
                            });
                            $('#dg').datagrid('reload')
                        }
                    });
                }
            })
        } else {
            $.messager.alert("操作提示", "请选择一行数据！");
        }
    }

    function save() {
        $.ajax({
            url: '<%=basePath%>${className!?uncap_first}/save.do',
            type: 'post',
            data: $("#addForm").serialize(),
            dataType: 'json',
            success: function (data) {
                $.messager.show({
                    title: '提示',
                    msg: data.message,
                    timeout: 3000,
                    showType: 'slide'
                });
                $('#dlg').dialog('close');
                $('#dg').datagrid('reload')
            }
        })
    }

</script>
<script>
    window.onload = function () {
        var _hei = $(window).height(),//获取页面总高度
                _top = $('.easyui-datagrid-height').offset().top;//获取表格头部位置
        $('.easyui-datagrid-height').height(_hei - _top - 10);//赋值表格高度（页面总高度减去表格头部位置减去body > padding-bottom: 10个像素）
        $('#dg').datagrid();  //重新渲染表格高度
        //给按钮添加样式
        refreshBtn(['add', 'edit','view', 'del']);
    };

</script>
</body>
</html>